React use Hook: Asinxron Resurs Iste'molini O'zlashtirish

React hooklari funksional komponentlarda holat (state) va qo'shimcha effektlarni (side effects) boshqarish usulimizni butunlay o'zgartirdi. Eng kuchli kombinatsiyalardan biri bu useEffect va useState'dan API'dan ma'lumotlarni olish kabi asinxron resurs iste'molini boshqarish uchun foydalanishdir. Ushbu maqola mustahkam va global miqyosda foydalanish mumkin bo'lgan React ilovalarini yaratish uchun asinxron operatsiyalar uchun hooklardan foydalanishning nozik jihatlari, eng yaxshi amaliyotlar, xatoliklarni bartaraf etish va unumdorlikni optimallashtirish masalalarini chuqur o'rganadi.

Asoslarni tushunish: useEffect va useState

Murakkabroq stsenariylarga o'tishdan oldin, keling, ishtirok etadigan asosiy hooklarni qayta ko'rib chiqamiz:

• useEffect: Ushbu hook funksional komponentlaringizda qo'shimcha effektlarni (side effects) bajarishga imkon beradi. Qo'shimcha effektlar ma'lumotlarni olish, obunalar yoki DOMni to'g'ridan-to'g'ri boshqarishni o'z ichiga olishi mumkin.
• useState: Ushbu hook funksional komponentlaringizga holat (state) qo'shish imkonini beradi. Holat vaqt o'tishi bilan o'zgaradigan ma'lumotlarni, masalan, yuklanish holati yoki API'dan olingan ma'lumotlarni boshqarish uchun zarurdir.

Ma'lumotlarni olishning odatiy usuli asinxron so'rovni boshlash uchun useEffect'dan va ma'lumotlarni, yuklanish holatini va har qanday potensial xatoliklarni saqlash uchun useState'dan foydalanishni o'z ichiga oladi.

Ma'lumotlarni Olishning Oddiy Misoli

Keling, taxminiy API'dan foydalanuvchi ma'lumotlarini olishning oddiy misolidan boshlaymiz:

Misol: Foydalanuvchi Ma'lumotlarini Olish

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [userId]); if (loading) { return

Foydalanuvchi ma'lumotlari yuklanmoqda...

; } if (error) { return

Xatolik: {error.message}

; } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return ( ); } export default UserProfile; ```

Ushbu misolda, useEffect userId prop o'zgarganda foydalanuvchi ma'lumotlarini oladi. U fetch API'sining asinxron tabiatini boshqarish uchun async funksiyasidan foydalanadi. Komponent, shuningdek, yaxshiroq foydalanuvchi tajribasini ta'minlash uchun yuklanish va xatolik holatlarini boshqaradi.

Yuklanish va Xatolik Holatlarini Boshqarish

Yuklanish paytida vizual fikr-mulohazalarni taqdim etish va xatoliklarni to'g'ri bartaraf etish yaxshi foydalanuvchi tajribasi uchun juda muhimdir. Oldingi misol allaqachon yuklanish va xatoliklarni bartaraf etishning asosiy usullarini ko'rsatib berdi. Keling, ushbu tushunchalarni kengaytiramiz.

Yuklanish Holatlari

Yuklanish holati ma'lumotlar olinayotganini aniq ko'rsatishi kerak. Bunga oddiy yuklanish xabari yoki murakkabroq yuklanish spinneri yordamida erishish mumkin.

Misol: Yuklanish Spinneridan Foydalanish

Oddiy matnli xabar o'rniga, siz yuklanish spinneri komponentidan foydalanishingiz mumkin:

```javascript // LoadingSpinner.js import React from 'react'; function LoadingSpinner() { return

; // O'zingizning haqiqiy spinner komponentingiz bilan almashtiring } export default LoadingSpinner; ```

```javascript // UserProfile.js (o'zgartirilgan) import React, { useState, useEffect } from 'react'; import LoadingSpinner from './LoadingSpinner'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Oldingi kabi useEffect if (loading) { return ; // Yuklanish spinneri komponentidan foydalaning } if (error) { return

Xatolik: {error.message}

; } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return ( ... ); // Oldingi kabi return } export default UserProfile; ```

Xatoliklarni Boshqarish

Xatoliklarni boshqarish foydalanuvchiga ma'lumot beruvchi xabarlarni taqdim etishi va xatolikdan tiklanish usullarini taklif qilishi mumkin. Bu so'rovni qayta urinish yoki qo'llab-quvvatlash uchun aloqa ma'lumotlarini taqdim etishni o'z ichiga olishi mumkin.

Misol: Foydalanuvchiga Qulay Xatolik Xabarini Ko'rsatish

```javascript // UserProfile.js (o'zgartirilgan) import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Oldingi kabi useEffect if (loading) { return

Foydalanuvchi ma'lumotlari yuklanmoqda...

; } if (error) { return ( ); } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return ( ... ); // Oldingi kabi return } export default UserProfile; ```

Qayta Foydalanish Uchun Maxsus Hooklar Yaratish

Agar bir nechta komponentlarda bir xil ma'lumotlarni olish mantig'ini takrorlayotganingizni sezsangiz, maxsus hook yaratish vaqti keldi. Maxsus hooklar kodni qayta ishlatish va unga xizmat ko'rsatishni osonlashtiradi.

Misol: useFetch Hooki

Keling, ma'lumotlarni olish mantig'ini o'z ichiga olgan useFetch hookini yaratamiz:

```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Endi siz o'zingizning komponentlaringizda useFetch hookidan foydalanishingiz mumkin:

```javascript // UserProfile.js (o'zgartirilgan) import React from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); if (loading) { return

Foydalanuvchi ma'lumotlari yuklanmoqda...

; } if (error) { return

Xatolik: {error.message}

; } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return ( ); } export default UserProfile; ```

useFetch hooki komponent mantig'ini sezilarli darajada soddalashtiradi va ma'lumotlarni olish funksiyasini ilovangizning boshqa qismlarida qayta ishlatishni osonlashtiradi. Bu, ayniqsa, ko'plab ma'lumotlarga bog'liqligi bo'lgan murakkab ilovalar uchun foydalidir.

Unumdorlikni Optimallashtirish

Asinxron resurs iste'moli ilova unumdorligiga ta'sir qilishi mumkin. Hooklardan foydalanishda unumdorlikni optimallashtirish uchun bir nechta strategiyalar mavjud:

1. Debouncing va Throttling

Qidiruv kiritish kabi tez-tez o'zgarib turadigan qiymatlar bilan ishlaganda, debouncing va throttling haddan tashqari ko'p API chaqiruvlarining oldini oladi. Debouncing funksiyaning ma'lum bir kechikishdan keyin faqat bir marta chaqirilishini ta'minlaydi, throttling esa funksiyaning chaqirilish tezligini cheklaydi.

Misol: Qidiruv Kiritishni Debouncing Qilish```javascript import React, { useState, useEffect } from 'react'; import useFetch from './useFetch'; function SearchComponent() { const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); useEffect(() => { const timerId = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms kechikish return () => { clearTimeout(timerId); }; }, [searchTerm]); const { data: results, loading, error } = useFetch(`https://api.example.com/search?q=${debouncedSearchTerm}`); const handleInputChange = (event) => { setSearchTerm(event.target.value); }; return (

); } export default SearchComponent; ```

Ushbu misolda, debouncedSearchTerm faqat foydalanuvchi 500ms davomida yozishni to'xtatgandan so'ng yangilanadi, bu har bir klaviatura bosilishida keraksiz API chaqiruvlarining oldini oladi. Bu unumdorlikni oshiradi va server yuklamasini kamaytiradi.

2. Keshlashtirish

Olingan ma'lumotlarni keshlashtirish API chaqiruvlari sonini sezilarli darajada kamaytirishi mumkin. Siz keshlashtirishni turli darajalarda amalga oshirishingiz mumkin:

• Brauzer Keshi: API'ngizni tegishli HTTP keshlashtirish sarlavhalaridan foydalanish uchun sozlang.
• Xotiradagi Kesh (In-Memory Cache): Ilovangiz ichida olingan ma'lumotlarni saqlash uchun oddiy obyektdan foydalaning.
• Doimiy Xotira: Uzoq muddatli keshlashtirish uchun localStorage yoki sessionStorage'dan foydalaning.

Misol: useFetch'da Oddiy Xotiradagi Keshni Amalga Oshirish

```javascript // useFetch.js (o'zgartirilgan) import { useState, useEffect } from 'react'; const cache = {}; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); if (cache[url]) { setData(cache[url]); setLoading(false); return; } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const jsonData = await response.json(); cache[url] = jsonData; setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Ushbu misol oddiy xotiradagi keshni qo'shadi. Agar ma'lum bir URL uchun ma'lumotlar allaqachon keshda mavjud bo'lsa, u yangi API chaqiruvi o'rniga to'g'ridan-to'g'ri keshdan olinadi. Bu tez-tez murojaat qilinadigan ma'lumotlar uchun unumdorlikni keskin oshirishi mumkin.

3. Memoizatsiya

React'ning useMemo hooki olingan ma'lumotlarga bog'liq bo'lgan qimmat hisob-kitoblarni memoizatsiya qilish uchun ishlatilishi mumkin. Bu ma'lumotlar o'zgarmaganida keraksiz qayta renderlarning oldini oladi.

Misol: Hosilaviy Qiymatni Memoizatsiya Qilish

```javascript import React, { useMemo } from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); const formattedName = useMemo(() => { if (!user) return ''; return `${user.firstName} ${user.lastName}`; }, [user]); if (loading) { return

Foydalanuvchi ma'lumotlari yuklanmoqda...

; } if (error) { return

Xatolik: {error.message}

; } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return ( ); } export default UserProfile; ```

Ushbu misolda, formattedName faqat user obyekti o'zgarganda qayta hisoblanadi. Agar user obyekti o'zgarmasa, memoizatsiya qilingan qiymat qaytariladi, bu esa keraksiz hisob-kitoblar va qayta renderlarning oldini oladi.

4. Kodni Bo'lish (Code Splitting)

Kod splitting ilovangizni kichikroq qismlarga bo'lish imkonini beradi, ularni talabga binoan yuklash mumkin. Bu, ayniqsa, ko'plab bog'liqliklarga ega bo'lgan katta ilovalar uchun ilovangizning dastlabki yuklanish vaqtini yaxshilashi mumkin.

Misol: Komponentni Dangasa Yuklash (Lazy Loading)

```javascript import React, { lazy, Suspense } from 'react'; const UserProfile = lazy(() => import('./UserProfile')); function App() { return ( Foydalanuvchi profili yuklanmoqda...

}> ); } export default App; ```

Ushbu misolda, UserProfile komponenti faqat kerak bo'lganda yuklanadi. Suspense komponenti komponent yuklanayotganda zaxira interfeysini taqdim etadi.

Poyga Holatlarini (Race Conditions) Boshqarish

Poyga holatlari bir xil useEffect hookida bir nechta asinxron operatsiyalar boshlanganda yuzaga kelishi mumkin. Agar komponent barcha operatsiyalar yakunlanmasdan oldin o'chirilsa (unmount), siz xatoliklarga yoki kutilmagan xatti-harakatlarga duch kelishingiz mumkin. Komponent o'chirilganda ushbu operatsiyalarni tozalash juda muhim.

Misol: Tozalash Funksiyasi Yordamida Poyga Holatlarining Oldini Olish

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; // Komponentning o'rnatilgan holatini kuzatish uchun bayroq qo'shing const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (isMounted) { // Faqatgina komponent hali ham o'rnatilgan bo'lsa, holatni yangilang setUser(data); } } catch (error) { if (isMounted) { // Faqatgina komponent hali ham o'rnatilgan bo'lsa, holatni yangilang setError(error); } } finally { if (isMounted) { // Faqatgina komponent hali ham o'rnatilgan bo'lsa, holatni yangilang setLoading(false); } } }; fetchData(); return () => { isMounted = false; // Komponent o'chirilganda bayroqni false qilib belgilang }; }, [userId]); if (loading) { return

Foydalanuvchi ma'lumotlari yuklanmoqda...

; } if (error) { return

Xatolik: {error.message}

; } if (!user) { return

Foydalanuvchi ma'lumotlari mavjud emas.

; } return (

{user.name}

Email: {user.email}

Joylashuv: {user.location}

); } export default UserProfile; ```

Ushbu misolda, komponentning hali ham o'rnatilganligini kuzatish uchun isMounted bayrog'i ishlatiladi. Holat faqat komponent hali ham o'rnatilgan bo'lsa yangilanadi. Tozalash funksiyasi komponent o'chirilganda bayroqni false qilib belgilaydi, bu poyga holatlari va xotira sizib chiqishining oldini oladi. Alternativ yondashuv, ayniqsa kattaroq yuklamalar yoki uzoq davom etadigan operatsiyalar bilan, fetch so'rovini bekor qilish uchun `AbortController` API'sidan foydalanishdir.

Asinxron Resurs Iste'moli Uchun Global Mulohazalar

Global auditoriya uchun React ilovalarini yaratishda quyidagi omillarni hisobga oling:

• Tarmoq Kechikishi (Network Latency): Dunyoning turli qismlaridagi foydalanuvchilar har xil tarmoq kechikishlariga duch kelishi mumkin. API endpointlaringizni tezlik uchun optimallashtiring va kechikish ta'sirini minimallashtirish uchun keshlashtirish va kodni bo'lish kabi texnikalardan foydalaning. Statik aktivlarni foydalanuvchilaringizga yaqinroq serverlardan yetkazib berish uchun CDN (Content Delivery Network) dan foydalanishni o'ylab ko'ring. Masalan, agar sizning API'ngiz AQShda joylashgan bo'lsa, Osiyodagi foydalanuvchilar sezilarli kechikishlarga duch kelishi mumkin. CDN sizning API javoblaringizni turli joylarda keshlab, ma'lumotlar bosib o'tishi kerak bo'lgan masofani qisqartirishi mumkin.
• Ma'lumotlarni Mahalliylashtirish: Foydalanuvchining joylashuviga qarab sanalar, valyutalar va raqamlar kabi ma'lumotlarni mahalliylashtirish zaruratini ko'rib chiqing. Ma'lumotlarni formatlash uchun react-intl kabi xalqarolashtirish (i18n) kutubxonalaridan foydalaning.
• Foydalanish Imkoniyati (Accessibility): Ilovangiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. ARIA atributlaridan foydalaning va foydalanish imkoniyati bo'yicha eng yaxshi amaliyotlarga rioya qiling. Masalan, rasmlar uchun alternativ matn taqdim eting va ilovangizni klaviatura yordamida boshqarish mumkinligiga ishonch hosil qiling.
• Vaqt Mintaqalari: Sanalar va vaqtlarni ko'rsatishda vaqt mintaqalariga e'tiborli bo'ling. Vaqt mintaqalarini o'zgartirish uchun moment-timezone kabi kutubxonalardan foydalaning. Masalan, agar ilovangiz tadbir vaqtlarini ko'rsatsa, ularni foydalanuvchining mahalliy vaqt mintaqasiga o'zgartirganingizga ishonch hosil qiling.
• Madaniy Noziklik: Ma'lumotlarni ko'rsatish va foydalanuvchi interfeysini loyihalashda madaniy farqlardan xabardor bo'ling. Ayrim madaniyatlarda haqoratli bo'lishi mumkin bo'lgan tasvirlar yoki belgilardan foydalanishdan saqlaning. Ilovangiz madaniy jihatdan mos ekanligiga ishonch hosil qilish uchun mahalliy mutaxassislar bilan maslahatlashing.

Xulosa

React'da hooklar yordamida asinxron resurs iste'molini o'zlashtirish mustahkam va unumdor ilovalar yaratish uchun zarurdir. useEffect va useState'ning asoslarini tushunish, qayta foydalanish uchun maxsus hooklar yaratish, debouncing, keshlashtirish va memoizatsiya kabi usullar yordamida unumdorlikni optimallashtirish va poyga holatlarini boshqarish orqali siz butun dunyodagi foydalanuvchilar uchun ajoyib foydalanuvchi tajribasini taqdim etadigan ilovalar yaratishingiz mumkin. Global auditoriya uchun ilovalar ishlab chiqishda har doim tarmoq kechikishi, ma'lumotlarni mahalliylashtirish va madaniy noziklik kabi global omillarni yodda tuting.

Qo'shimcha Resurslar

• React useEffect Hujjatlari
• React useState Hujjatlari
• useHooks.com - Qayta ishlatiladigan React Hooklari to'plami
• Fetch API Hujjatlari